<template>
    <div class="main-container">
        <div>
            <div class="flex">
                <button @click.native="checkSidebar">切换</button>
                <BreadCrumb />
            </div>

            <RouteTag />
        </div>
        <!-- Main -->

        <div class="color-container">
            <slot></slot>
        </div>
    </div>
</template>

<script  setup>
import { useStore } from '@/store'
// import { ArrowRight } from '@element-plus/icons-vue'
import BreadCrumb from '@/components/BreadCrumb.vue';
import RouteTag from './RouteTag.vue';
const store = useStore()
const checkSidebar = () => {
    // console.log("点击切换")
    store.checkSidebar()
}
</script>

<style lang="scss" scoped>
.main-container {
    flex: 1;
    display: flex;
    flex-direction: column;

    .color-container {
        background-color: #5DDAB4;
        flex-grow: 1;
    }

    // background-color: green;
}
.flex{
    display: flex;
}
</style>